<template>
  <div class="full-box d-flex-c">
    <BKTabs
      v-model="currentTab"
      :data="tabs"
      class="tab"
    />
    <Station
      v-show="currentTab === '1'"
      v-on="$listeners"
    />
    <Project
      v-show="currentTab === '2'"
      v-on="$listeners"
    />
  </div>
</template>

<script>
import Station from '../station.vue'
import Project from '../project.vue'
export default {
  name: 'ItemPanel',
  components: {
    Station,
    Project
  },
  data () {
    return {
      currentTab: '1',
      tabs: [
        { name: '1', label: '测站' },
        { name: '2', label: '水利工程' }
      ]
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.tab {
  ::v-deep .el-tabs__header {
    margin-bottom: 10px;
  }

  ::v-deep .el-tabs__nav-wrap {
    background: #f3f6f9;
    padding: 0 10px;

    &::after {
      display: none;
    }

    .el-tabs__item {
      height: 38px;
      line-height: 38px;
      font-size: 16px;
      color: #76778e;
      width: 94px;
      text-align: center;
      padding: 0;

      &.is-active {
        color: #333;
      }

      &:hover {
        color: #333;
      }
    }

    .el-tabs__active-bar {
      background-color: #0080ff;
      height: 3px;
      bottom: 1px;
      width: 94px !important;
    }
  }
}
</style>
